<template>
    <div>
        <div class="public_content_right_l pull-left w-600 over-h">
            <div class="public_card">
                <div class="public_card_title bg-img-card fcolor-white">
                    <span class="fsize-18 pl-15">视频学习</span> /
                    <a class="fcolor-white">更多</a>
                </div>
                <div class="study_topic_content mt-15 w-600 h-340 po-re over-h">
                    <a class="see-details" href="#/studyCente-detail/courseWareDetail/0">
                        <img :src="list[0].img" class=" w-all di-b center-ver" alt="视频图片">
                    </a>
                </div>
            </div>
        </div>
        <div class="public_content_right_r pull-right w-320 over-h">
            <!--课件排行开始-->
            <div>
                <div class="public_card_title">
                    <span class="fsize-16">课件排行</span>
                    <a href="javascript:;" class="fcolor-99">&nbsp;更多&nbsp;&gt;&gt;</a>
                </div>
                <ul class=" over-h mt-15">
                    <li v-for="(item, index) in list" :key="index" v-if="index < 5" class="mb-10">
                        <a class="see-details" :href='"#/studyCente-detail/courseWareDetail/"+index'>
                            <div class="di-ib w-100 h-60 over-h po-re pull-left mr-10">
                                <img :src="item.img" class="di-ib w-all center-ver" alt="">
                            </div>

                            <p class="di-i fsize-14 fcolor-33 line-overf">{{item.name}}</p>
                            <div class="clearfix"></div>
                        </a>
                    </li>                   
                </ul>
            </div>
        </div>
        <!--课件排行结束-->
        <div class="clearfix"></div>

        <!--视频列表开始-->
        <div class="mt-30 mb-10">
            <img src="@/assets/img/study_online_icon_vedio.png" class="va-b mr-5" alt="">
            <span class="fsize-16 fcolor-33 mr-30">视频列表</span>
            <ul class="di-i fcolor-33 fsize-12 study_online_videolist">
                <li class="di-i mr-15 study_online_videolistactive">
                    <a class="po-re" @click="change(0)">
                        两学一做
                    </a>
                </li>
                <li class="di-i">
                    <a class="po-re" @click="change(1)">
                        三会一课
                    </a>
                </li>
            </ul>
        </div>
        <div>
            <div class="study_topic_content_box boxsize-b w-220 h-200 pull-left mr-10 mb-10 hr-s-f1f1f1 over-h" v-for="(item, index) in list" :key="index" v-if="index < max && index >= min" >
                <a class="see-details" :href="'#/studyCente-detail/courseWareDetail/' + index">
                    <div class="h-150 w-all over-h po-re">
                        <img :src="item.img" class="w-all di-b center-ver-hor" alt="考试中心图片">
                    </div>
                    <div>
                        <p class="fsize-14 fcolor-33 p-5 line-overf">{{item.name}}</p>
                    </div>
                </a>
            </div>  
            <div class="clearfix"></div>
        </div>
        <!--视频列表结束-->
        <!--文章学习开始-->
        <div class="mt-25">
            <div class="public_content_right_l pull-left w-600 over-h">
                <div class="public_card">
                    <div class="public_card_title bg-img-card fcolor-white">
                        <span class="fsize-18 pl-15">文章学习</span> /
                        <a href="ipam_material_list/type/11.html" class="fcolor-white">更多</a>
                    </div>
                    <div class="study_topic_content mt-20 w-600 h-340 po-re over-h">
                        <ul class="public_card_text_content">
                        <li class="public_card_text_lr w-300 boxsize-b mr-5 mb-10">
                                <a class="see-details" href="ipam_material_info/material_id/168.html">
                                    <div class="public_card_text_lr_img h-all pull-left w-110 mr-10 hr-s-dfdfdf">
                                        <div class="w-all h-all over-h po-re">
                                            <img src="@/assets/img/5ae9366230306.jpg" class="di-b h-all center-ver-hor" alt="图书图片">
                                        </div>
                                    </div>
                                    <div class="public_card_text_lr_txt po-re">
                                        <p class="mb-15 fsize-16 txt-overh">atnc学习资料</p>
                                        <p class="public_card_text_lr_txt_content fcolor-99">atnc学习资料</p>
                                        <div class="po-ab bottom-10 right-10">
                                            <span class=" ">1201</span>
                                            <span class="">次浏览</span>
                                        </div>
                                    </div>
                                </a>
                            </li><li class="public_card_text_lr w-300 boxsize-b mr-5 mb-10">
                                <a class="see-details" href="ipam_material_info/material_id/166.html">
                                    <div class="public_card_text_lr_img h-all pull-left w-110 mr-10 hr-s-dfdfdf">
                                        <div class="w-all h-all over-h po-re">
                                            <img src="@/assets/img/5ae9366230306.jpg" class="di-b h-all center-ver-hor" alt="图书图片">
                                        </div>
                                    </div>
                                    <div class="public_card_text_lr_txt po-re">
                                        <p class="mb-15 fsize-16 txt-overh"> “智慧党建”升级</p>
                                        <p class="public_card_text_lr_txt_content fcolor-99"> “智慧党建”升级</p>
                                        <div class="po-ab bottom-10 right-10">
                                            <span class=" ">1201</span>
                                            <span class="">次浏览</span>
                                        </div>
                                    </div>
                                </a>
                            </li><li class="public_card_text_lr w-300 boxsize-b mr-5 mb-10">
                                <a class="see-details" href="ipam_material_info/material_id/201.html">
                                    <div class="public_card_text_lr_img h-all pull-left w-110 mr-10 hr-s-dfdfdf">
                                        <div class="w-all h-all over-h po-re">
                                            <img src="@/assets/img/5ae9366230306.jpg" class="di-b h-all center-ver-hor" alt="图书图片">
                                        </div>
                                    </div>
                                    <div class="public_card_text_lr_txt po-re">
                                        <p class="mb-15 fsize-16 txt-overh"> 强化政治纪律 666</p>
                                        <p class="public_card_text_lr_txt_content fcolor-99"> 强化政治纪律 666</p>
                                        <div class="po-ab bottom-10 right-10">
                                            <span class=" ">1201</span>
                                            <span class="">次浏览</span>
                                        </div>
                                    </div>
                                </a>
                            </li><li class="public_card_text_lr w-300 boxsize-b mr-5 mb-10">
                                <a class="see-details" href="ipam_material_info/material_id/202.html">
                                    <div class="public_card_text_lr_img h-all pull-left w-110 mr-10 hr-s-dfdfdf">
                                        <div class="w-all h-all over-h po-re">
                                            <img src="@/assets/img/5ae9366230306.jpg" class="di-b h-all center-ver-hor" alt="图书图片">
                                        </div>
                                    </div>
                                    <div class="public_card_text_lr_txt po-re">
                                        <p class="mb-15 fsize-16 txt-overh"> 《习近平谈治国理政》第一卷内容速览</p>
                                        <p class="public_card_text_lr_txt_content fcolor-99"> 《习近平谈治国理政》第一卷内容速览</p>
                                        <div class="po-ab bottom-10 right-10">
                                            <span class=" ">1201</span>
                                            <span class="">次浏览</span>
                                        </div>
                                    </div>
                                </a>
                            </li>                            
                        </ul>
                    </div>
                </div>
            </div>
            <div class="public_content_right_r pull-right w-320 over-h">
                <!--文章排行开始-->
                <div class="study_online_articaltop">
                    <div class="public_card_title">
                        <span class="fsize-16">文章排行</span>
                        <a href="javascript:;" class="fcolor-99">&nbsp;更多&nbsp;&gt;&gt;</a>
                    </div>
                    <ul class="public_card_content over-h mt-20 decimal_ul">
                        <li class="lh-35 po-re">
                            <a class="see-details" href="ipam_material_info/material_id/160.html">
                                <div class="public_card_text_lr_img hr-s-dfdfdf pull-left h-80 w-54 mr-15">
                                    <div class="w-all h-all over-h">
                                        <img src="@/assets/img/5acc1b5c57dd6.jpg" class="di-b h-all center-block" alt="图书图片">
                                    </div>
                                </div>
                                <div class="">
                                    <p class="fsize-14 fcolor-33">学习资料</p>
                                    <p class="fsize-12 fcolor-808080 pre-wrap lh-20 line-overf" style="white-space: pre-wrap">近日，德州市德州市德州市宁津县以“控制总量、优化······</p>
                                </div>
                            </a>
                        </li>
                         <li class="lh-35 po-re">
                            <a class="see-details" href="ipam_material_info/material_id/185.html">学习资料</a>
                        </li><li class="lh-35 po-re">
                            <a class="see-details" href="ipam_material_info/material_id/188.html">学习资料</a>
                        </li><li class="lh-35 po-re">
                            <a class="see-details" href="ipam_material_info/material_id/191.html">学习资料</a>
                        </li><li class="lh-35 po-re">
                            <a class="see-details" href="ipam_material_info/material_id/194.html">学习资料</a>
                        </li><li class="lh-35 po-re">
                            <a class="see-details" href="ipam_material_info/material_id/197.html">学习资料</a>
                        </li><li class="lh-35 po-re">
                            <a class="see-details" href="ipam_material_info/material_id/200.html">学习资料</a>
                        </li><li class="lh-35 po-re">
                            <a class="see-details" href="ipam_material_info/material_id/157.html">强化政治纪律 </a>
                        </li><li class="lh-35 po-re">
                            <a class="see-details" href="ipam_material_info/material_id/184.html">强化政治纪律</a>
                        </li>                        
                    </ul>
                </div>
                <!--文章排行结束-->
            </div>
            <div class="clearfix"></div>
            <!--视频列表开始-->
            <div class="study_artical mt-15">
                <div class="mb-10">
                    <img src="@/assets/img/study_online_icon_vedio.png" class="va-b mr-5" alt="">
                    <span class="fsize-18 fcolor-33 mr-30">视频列表</span>
                    <ul class="di-i fcolor-33 fsize-12 study_online_videolist">
                        <li class="di-i mr-15 study_online_videolistactive">
                            <a href="javascript:;" class="po-re">
                                两学一做
                            </a>
                        </li>
                        <li class="di-i">
                            <a href="javascript:;" class="po-re">
                                三会一课
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="di-tb w-all">
                 <div class="public_hover_shadow study_online_video_list     ">
                        <a href="ipam_material_info/material_id/184.html">
                            <div class="public_card_text_lr_img h-160 w-all">
                                <div class="w-all h-all over-h">
                                    <img src="@/assets/img/5ae9352377a6c.jpg" class="di-b h-all center-block" alt="文章图片q">
                                </div>
                            </div>
                            <p class="fsize-12 m-10">强化政治纪律</p>
                        </a>
                    </div><div class="public_hover_shadow study_online_video_list     ">
                        <a href="ipam_material_info/material_id/187.html">
                            <div class="public_card_text_lr_img h-160 w-all">
                                <div class="w-all h-all over-h">
                                    <img src="@/assets/img/5ae9352377a6c.jpg" class="di-b h-all center-block" alt="文章图片q">
                                </div>
                            </div>
                            <p class="fsize-12 m-10">强化政治纪律</p>
                        </a>
                    </div><div class="public_hover_shadow study_online_video_list     ">
                        <a href="ipam_material_info/material_id/190.html">
                            <div class="public_card_text_lr_img h-160 w-all">
                                <div class="w-all h-all over-h">
                                    <img src="@/assets/img/5ae9352377a6c.jpg" class="di-b h-all center-block" alt="文章图片q">
                                </div>
                            </div>
                            <p class="fsize-12 m-10">强化政治纪律 4</p>
                        </a>
                    </div><div class="public_hover_shadow study_online_video_list     ">
                        <a href="ipam_material_info/material_id/193.html">
                            <div class="public_card_text_lr_img h-160 w-all">
                                <div class="w-all h-all over-h">
                                    <img src="@/assets/img/5ae9352377a6c.jpg" class="di-b h-all center-block" alt="文章图片q">
                                </div>
                            </div>
                            <p class="fsize-12 m-10">强化政治纪律 5</p>
                        </a>
                    </div><div class="public_hover_shadow study_online_video_list     ">
                        <a href="ipam_material_info/material_id/196.html">
                            <div class="public_card_text_lr_img h-160 w-all">
                                <div class="w-all h-all over-h">
                                    <img src="@/assets/img/5ae9352377a6c.jpg" class="di-b h-all center-block" alt="文章图片q">
                                </div>
                            </div>
                            <p class="fsize-12 m-10">强化政治纪律 6</p>
                        </a>
                    </div><div class="public_hover_shadow study_online_video_list     ">
                        <a href="ipam_material_info/material_id/199.html">
                            <div class="public_card_text_lr_img h-160 w-all">
                                <div class="w-all h-all over-h">
                                    <img src="@/assets/img/5ae9352377a6c.jpg" class="di-b h-all center-block" alt="文章图片q">
                                </div>
                            </div>
                            <p class="fsize-12 m-10">强化政治纪律 7</p>
                        </a>
                    </div>                
                </div>
            </div>
            <!--视频列表结束-->
        </div>
        <!--文章学习结束-->
    </div>
</template>

<script>
    import VideoData from './data.js'
    export default {
        data() {
            return {
              list: VideoData.videoList,
              min: 0,
              max: 8
            }
        },
        methods: {
            change(index) {
                if(index == 0) {
                  this.min = 0;
                  this.max = 8;
                } else {
                  this.min = 8;
                  this.max = 16;
                }
            }
        },
    }
</script>

<style scoped>
.boxsize-b {
    box-sizing: border-box;
}
.hr-s-f1f1f1 {
    border: solid 1px #f1f1f1;
}

.public_card_text_lr {
    display: inline-block;
    /* width: calc( (100% - 18px) / 4 ); */
    height: 162px;
    /* margin-top: 12px; */
}
.public_card_text_lr_txt {
    height: 162px;
    box-sizing: border-box;
    /* margin-left: 110px; */
    padding: 6px 16px 12px 12px;
    font-size: 14px;
    color: #333;
}
.public_card_text_lr_txt_content {
    font-size: 12px;
    /* color: #999; */
    line-height: 22px;
}
.public_card_content a {
    color: #333;
    display: inline-block;
    width: 100%;
    vertical-align: top;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.public_card_text_lr_img {
    /* border: solid 1px #dfdfdf; */
    box-sizing: border-box;
    padding: 4px;
}
ul.decimal_ul, ul.decimal_ul li {
    list-style: decimal!important;
}
ul.public_card_content, ul.public_card_content > li {
    list-style: disc;
    color: #d9d9d9;
}
.public_card_content li {
    counter-increment: chapter;
}
.public_card_content > li {
    font-size: 14px;
}
.public_hover_shadow:hover{
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.14);
}
</style>